/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx,scss}",
  ],
  theme: {
    extend: {
      spacing: () => {
        const spacingMap = {};
        for (let i = 1; i <= 1000; i++) {
          spacingMap[`${i}`] = `${i}px`;
        }

        // 生成一些常用的百分比值
        spacingMap['1/2'] = '50%';
        spacingMap['1/3'] = '33.333333%';
        spacingMap['2/3'] = '66.666667%';
        spacingMap['1/4'] = '25%';
        spacingMap['3/4'] = '75%';
        spacingMap['full'] = '100%';

        return spacingMap;
      },

      gap: () => {
        const gap = {};
        for (let i = 0; i <= 50; i++) {
          gap[i] = `${i}px`;
        }
        return gap;
      }
    },
  },
  plugins: [
    function ({ addUtilities }) {
      const flexUtilities = {
        // justify-content + align-items 组合
        '.flex-start-center': {
          display: 'flex',
          'justify-content': 'flex-start',
          'align-items': 'center'
        },
        '.flex-start-start': {
          display: 'flex',
          'justify-content': 'flex-start',
          'align-items': 'flex-start'
        },
        '.flex-start-end': {
          display: 'flex',
          'justify-content': 'flex-start',
          'align-items': 'flex-end'
        },
        '.flex-center-center': {
          display: 'flex',
          'justify-content': 'center',
          'align-items': 'center'
        },
        '.flex-center-start': {
          display: 'flex',
          'justify-content': 'center',
          'align-items': 'flex-start'
        },
        '.flex-center-end': {
          display: 'flex',
          'justify-content': 'center',
          'align-items': 'flex-end'
        },
        '.flex-end-center': {
          display: 'flex',
          'justify-content': 'flex-end',
          'align-items': 'center'
        },
        '.flex-end-start': {
          display: 'flex',
          'justify-content': 'flex-end',
          'align-items': 'flex-start'
        },
        '.flex-end-end': {
          display: 'flex',
          'justify-content': 'flex-end',
          'align-items': 'flex-end'
        },
        '.flex-between-center': {
          display: 'flex',
          'justify-content': 'space-between',
          'align-items': 'center'
        },
        '.flex-between-start': {
          display: 'flex',
          'justify-content': 'space-between',
          'align-items': 'flex-start'
        },
        '.flex-between-end': {
          display: 'flex',
          'justify-content': 'space-between',
          'align-items': 'flex-end'
        },
        '.flex-around-center': {
          display: 'flex',
          'justify-content': 'space-around',
          'align-items': 'center'
        },
        '.flex-around-start': {
          display: 'flex',
          'justify-content': 'space-around',
          'align-items': 'flex-start'
        },
        '.flex-around-end': {
          display: 'flex',
          'justify-content': 'space-around',
          'align-items': 'flex-end'
        },
        '.flex-evenly-center': {
          display: 'flex',
          'justify-content': 'space-evenly',
          'align-items': 'center'
        },

        // 常用布局组合
        '.flex-col-center-center': {
          display: 'flex',
          'flex-direction': 'column',
          'justify-content': 'center',
          'align-items': 'center'
        },
        '.flex-col-start-center': {
          display: 'flex',
          'flex-direction': 'column',
          'justify-content': 'flex-start',
          'align-items': 'center'
        },
        '.flex-col-start-start': {
          display: 'flex',
          'flex-direction': 'column',
          'justify-content': 'flex-start',
          'align-items': 'start'
        },

        '.flex-col-between-center': {
          display: 'flex',
          'flex-direction': 'column',
          'justify-content': 'space-between',
          'align-items': 'center'
        },

        // 特殊用途
        '.flex-center-stretch': {
          display: 'flex',
          'justify-content': 'center',
          'align-items': 'stretch'
        },
        '.flex-between-stretch': {
          display: 'flex',
          'justify-content': 'space-between',
          'align-items': 'stretch'
        }
      };

      addUtilities(flexUtilities, ['responsive']);
    }
  ],
}

